<template>
	<div>
		<p>ajax模块</p>
		<x-input
			title="搜索值"
			placeholder="请输入搜索关键字"
			:debounce="debounce"
			@on-change="evt_fetchKeyWords"
			v-model="email"
		></x-input>
		<p v-show="isLoading">
			<spinner type="ripple" />
			<span>搜索中</span>
		</p>
		<group v-if="searchList.length">
			<cell
				v-for="item in searchList"
				:key="item.id"
			>
				<span slot="title">{{item.str}}</span>
				<!-- <span slot="icon">icon</span> -->
				<!-- <span slot="after-title">after</span> -->
				<span slot="inline-desc">{{item.id}}</span>
				<span>{{item.starttime}}至{{item.endtime}}</span>
			</cell>
		</group>
	</div>
</template>
<script type="text/javascript">
	import { XInput, Spinner, Group, Cell } from 'vux'
	import TestModel from '@/model/test.model'

	export default {
		name: 'demo-ajax',
		data: () => {
			return {
				email: '',
				isLoading: false,
				debounce: 300,
				searchList: []
			}
		},
		created() {
			this.TestModel = new TestModel();
		},
		methods: {
			evt_fetchKeyWords(v) {
				if (v) {
					this.isLoading = true;
					this.TestModel
					.setQuerys({query: v, from: this.$route.name})
					.setParams({page: 1})
					.go()
					.then(rst => {
						this.isLoading = false;
						this.searchList = rst.list;
					})
					.catch(err => {
						this.isLoading = false;
						this.searchList = [];
						this.$vux.toast.text(err.code);
					});
				} else {
					this.isLoading = false;
					this.searchList = [];
				}
			}
		},
		components: {
			XInput,
			Spinner,
			Group,
			Cell
		}
	}
</script>